<template>
  <div id="app" :class="{ 'dark-theme': isDarkMode }">
    <ParticlesBackground :isDarkMode="isDarkMode" />
    <router-view />
  </div>
</template>

<script>
import ParticlesBackground from '@/components/ParticlesBackground.vue'

export default {
  name: 'App',
  components: {
    ParticlesBackground
  },
  data() {
    return {
      isDarkMode: false
    }
  },
  created() {
    // 从 localStorage 读取主题偏好，默认为亮色模式
    const savedTheme = localStorage.getItem('theme')
    this.isDarkMode = savedTheme === 'dark'
    
    // 监听主题切换事件
    window.addEventListener('theme-change', this.handleThemeChange)
  },
  beforeUnmount() {
    window.removeEventListener('theme-change', this.handleThemeChange)
  },
  methods: {
    handleThemeChange(event) {
      this.isDarkMode = event.detail.isDarkMode
    }
  }
}
</script>

<style>
#app {
  min-height: 100vh;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
</style>

